<template>
<div class="experiment">
    <div class="e-left-box" v-show="!isFullScreen">
        <div class="e-tab">
            <div class="e-t-item" @click="index=i" :class="i===index?'e-t-active':''" v-for="(item, i) in tabList" :key="i">
                <i :class="`iconfont ${item.icon}`"></i>
                <span>{{item.name}}</span>
            </div>
        </div>
        <div class="exp-item-left">
            <component @addTab="handleGetTabs" :treeData="elList[index]['data']" :is="elList[index]['component']"></component>
        </div>
    </div>
    <div class="exp-item-mid" :style="isFullScreen?'width:100%':''">
        <el-tabs v-if="editableTabs.length>0" v-model="tabsValue" type="border-card" closable @tab-remove="handleTabRemove">
            <el-tab-pane :key="item.id" v-for="item in editableTabs" :label="item.name" :name="item.id">
                <main-canves v-if="tabsValue===item.id" @fullScreen="isFullScreen=!isFullScreen" @clickNode="handleClickNode" @clickCanves="formData.show=false"></main-canves>
            </el-tab-pane>
        </el-tabs>
        <div v-else class="empty-wrap">
            <i class="iconfont icon-empty"></i>
            <span>当前没有打开实验，您可以：</span>
            <span>打开已有实验</span>
            <span>在实验管理里，新建实验</span>
            <span>在画布左侧目录实验里新，建空白实验</span>
        </div>
    </div>
    <div class="exp-item-right" v-show="!isFullScreen">
        <edit-form :formData="formData"></edit-form>
    </div>
</div>
</template>

<script>
import {
    mapMutations
} from 'vuex'
import ExpList from '../list/ExpList'
import DataList from '../list/DataList'
import ComponentList from '../list/ComponentList'
import ModelList from '../list/ModelList'
import MainCanves from './MainCanves'
import EditForm from './EditForm'
export default {
    name: 'Experiment',
    components: {
        ExpList,
        DataList,
        ComponentList,
        ModelList,
        MainCanves,
        EditForm
    },
    data () {
        return {
            tabsValue: '1',
            editableTabs: [
                { name: '测试实验1', id: '1' },
                { name: '测试实验2', id: '2' }
            ],
            elList: [
                {
                    component: ExpList,
                    data: [
                        { id: '21', name: '实验名称1', icon: 'icon-shiyanliebiao' },
                        { id: '13', name: '实验名称2', icon: 'icon-shiyanliebiao' },
                        { id: '14', name: '实验名称3', icon: 'icon-shiyanliebiao' },
                        { id: '165', name: '实验名称4', icon: 'icon-shiyanliebiao' },
                        { id: '176', name: '实验名称5', icon: 'icon-shiyanliebiao' },
                        { id: '177', name: '实验名称6', icon: 'icon-shiyanliebiao' }
                    ]
                },
                {
                    component: DataList,
                    data: [
                        {
                            id: 2,
                            name: '常用表',
                            icon: 'icon-changyong',
                            children: [
                                { id: '85', name: '常用表232', icon: 'icon-shujuguanli1', checked: true },
                                { id: '65', name: '常用表242', icon: 'icon-shujuguanli1', checked: true },
                                { id: '4355', name: '常用表252', icon: 'icon-shujuguanli1', checked: true },
                                { id: '35', name: '常用表262', icon: 'icon-shujuguanli1', checked: true },
                                { id: '634', name: '常用表272', icon: 'icon-shujuguanli1', checked: true }
                            ]
                        },
                        {
                            id: 2,
                            name: '全部表',
                            icon: 'icon-shujuliebiao',
                            children: [
                                { id: '435', name: '全部表45e6', icon: 'icon-shujuguanli1', checked: false },
                                { id: '4575', name: '全部表4r56', icon: 'icon-shujuguanli1', checked: false },
                                { id: '587', name: '全部表45t6', icon: 'icon-shujuguanli1', checked: false },
                                { id: '654', name: '全部表4556', icon: 'icon-shujuguanli1', checked: false },
                                { id: '435', name: '全部表45876', icon: 'icon-shujuguanli1', checked: false },
                                { id: '46', name: '全部表4656', icon: 'icon-shujuguanli1', checked: false }
                            ]
                        }
                    ]
                },
                {
                    component: ComponentList,
                    data: [
                        {
                            id: 145,
                            name: '一级 1',
                            icon: 'icon-shiyanliebiao',
                            children: [{
                                id: 4658,
                                name: '二级 1-1',
                                icon: 'icon-shujuliebiao',
                                children: [{
                                    id: 989,
                                    name: '三级 1-1-1',
                                    children: [{
                                        id: 94567,
                                        name: '三级 1-1-1'
                                    }, {
                                        id: 15760,
                                        name: '三级 1-1-2'
                                    }]
                                }, {
                                    id: 156870,
                                    name: '三级 1-1-2'
                                }]
                            }]
                        },
                        {
                            id: 2,
                            name: '一级 2',
                            icon: 'icon-shiyanliebiao',
                            children: [{
                                id: 7685,
                                name: '二级 2-1'
                            }, {
                                id: 76896,
                                name: '二级 2-2'
                            }]
                        },
                        {
                            id: 6783,
                            name: '一级 3',
                            icon: 'icon-shiyanliebiao',
                            children: [{
                                id: 43567,
                                name: '二级 3-1'
                            }, {
                                id: 4568,
                                name: '二级 3-2'
                            }]
                        }
                    ]
                },
                {
                    component: ModelList,
                    data: [
                        {
                            id: 4561,
                            name: '一级 1',
                            icon: 'icon-shiyanliebiao',
                            children: [{
                                id: 4564,
                                name: '二级 1-1',
                                icon: 'icon-shujuliebiao',
                                children: [{
                                    id: 95687,
                                    name: '三级 1-1-1',
                                    children: [{
                                        id: 6799,
                                        name: '三级 1-1-1'
                                    }, {
                                        id: 1700,
                                        name: '三级 1-1-2'
                                    }]
                                }, {
                                    id: 14360,
                                    name: '三级 1-1-2'
                                }]
                            }]
                        },
                        {
                            id: 45762,
                            name: '一级 2',
                            icon: 'icon-shiyanliebiao',
                            children: [{
                                id: 155,
                                name: '二级 2-1'
                            }, {
                                id: 342656,
                                name: '二级 2-2'
                            }]
                        },
                        {
                            id: 4362,
                            name: '一级 2',
                            icon: 'icon-shiyanliebiao',
                            children: [{
                                id: 4565,
                                name: '二级 2-1'
                            }, {
                                id: 4566,
                                name: '二级 2-2'
                            }]
                        },
                        {
                            id: 2,
                            name: '一级 2',
                            icon: 'icon-shiyanliebiao',
                            children: [{
                                id: 5,
                                name: '二级 2-1'
                            }, {
                                id: 6796,
                                name: '二级 2-2'
                            }]
                        },
                        {
                            id: 78903,
                            name: '一级 3',
                            icon: 'icon-shiyanliebiao',
                            children: [{
                                id: 9807,
                                name: '二级 3-1'
                            }, {
                                id: 47588,
                                name: '二级 3-2'
                            }]
                        }
                    ]
                }
            ],
            formData: {
                show: false,
                data: {}
            },
            isFullScreen: false,
            index: 0,
            tabList: [
                { value: '0', name: '实验', icon: 'icon-shiyan' },
                { value: '1', name: '数据', icon: 'icon-shuju' },
                { value: '2', name: '组件', icon: 'icon-zujian' },
                { value: '3', name: '模型', icon: 'icon-moxing' }
            ]
        }
    },
    created () {
        this.setCollapse(true)
        // this.init()
    },
    methods: {
        ...mapMutations({
            setCollapse: 'common/setCollapse'
        }),
        // 打开实验列表里面某一个实验，如果该实验不存在就添加到画布上方的tab列表里面
        handleGetTabs (item) {
            let arr = this.editableTabs
            let flag = true
            for (let i = 0; i < arr.length; i++) {
                if (arr[i].id === item.id) {
                    this.tabsValue = item.id
                    flag = false
                    break
                }
            }
            if (flag) {
                if (arr.length > 5) {
                    this.$message.error('页签数已达上限6个，请关闭部分页签')
                } else {
                    this.editableTabs.push(item)
                    this.tabsValue = item.id
                }
            }
        },
        // 删除画布的其中一个tab
        handleTabRemove (id) {
            let tabs = this.editableTabs
            let activeId = this.tabsValue
            if (activeId === id) {
                tabs.forEach((tab, i) => {
                    if (tab.id === id) {
                        let nextTab = tabs[i + 1] || tabs[i - 1]
                        if (nextTab) {
                            activeId = nextTab.id
                        }
                    }
                })
            }
            this.tabsValue = activeId
            this.editableTabs = tabs.filter(tab => tab.id !== id)
        },
        handleClickNode (item) {
            this.formData = {
                show: true,
                data: item
            }
        },
        init () {
            const params = {
                projectId: this.$projectId,
                keyword: this.keyword,
                pageSize: this.pageSize,
                pageNum: this.currentPage
            }
            this.$post('experiment/query', params).then(res => {
                const { total, rows } = res
                this.total = total
                this.tableData = rows
            })
        }
    }
}
</script>

<style lang="less">
.experiment {
    background: #EBEEF5;
    box-sizing: border-box;
    height: 100%;
    display: flex;
    overflow: hidden;
    .empty-wrap {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        i {
            font-size: 100px;
            color: #409EFF;
        }
        span {
            line-height: 32px;
        }
    }
    .e-left-box {
        display: flex;
    }

    .e-tab {
        height: 100%;
        width: 30px;
        background: #232D34;
        .e-t-item {
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
            cursor: pointer;
            width: 100%;
            height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            border-bottom: 1px solid #e4e7ed;
            i {
                font-size: 20px;
                color: #EBEEF5;
                margin-bottom: 5px;
            }
            span {
                color: #EBEEF5;
                text-align: center;
            }
        }
        .e-t-active {
            i, span {
                color: #ffffff;
            }
            background: -webkit-linear-gradient(to right, #1d72b4 , #09d1bc);
            background: -o-linear-gradient(to right, #1d72b4, #09d1bc);
            background: -moz-linear-gradient(to right, #1d72b4, #09d1bc);
            background: linear-gradient(to right, #1d72b4 , #09d1bc);
        }
    }
    .exp-item-left {
        width: 200px;
        box-sizing: border-box;
    }
    .exp-item-mid {
        box-sizing: border-box;
        width: calc(100% - 530px);
        background: #ffffff;
        border-left: 1px solid #dcdfe6;
        border-right: 1px solid #dcdfe6;
        .el-tabs--border-card {
            height: 100%;
            box-shadow: none;
            border: none;
            .el-tab-pane {
                height: 100%;
            }
            .el-tabs__content {
                box-sizing: border-box;
                padding: 10px;
                height: calc(100% - 40px);
            }
        }
    }
    .exp-item-right {
        box-sizing: border-box;
        width: 300px;
    }
    .component-list {
        height: 100%;
        .my-scrollbar {
            height: calc(100% - 80px) !important;
            .el-scrollbar__wrap {
                overflow-x: initial !important;
            }
        }
        .el-tree {
            background: #EBEEF5;
            z-index: 9999;
        }
        .el-tree-node__content {
            height: 32px;
        }
        .tree-node-icon {
            padding-right: 5px;
            color: #409EFF;
        }
        .search-inpt {
            width: 190px;
            margin: 10px 5px;
        }
        .my-scrollbar {
            height: calc(100% - 60px)
        }
    }
}
</style>
